import React from 'react';
import { Button, Input, message, Row, Col, Form } from 'antd';
import { history } from 'umi';
import { useRequest } from 'ahooks';

import * as Api from './api';
import styles from './index.less';

function Login() {
  const [loginParams, setLoginParams] = React.useState({
    account: '',
    password: '',
  });

  const requestLogin = useRequest(() => Api.login(loginParams), {
    manual: true,
    onSuccess: ({ code }) => {
      if (code === 0) {
        history.replace('/home');
      } else if (code === -1) {
        message.error('登录失败，请联系管理员');
      }
    },
  });

  const onFinish = React.useCallback(values => {
    setLoginParams(values);
    // 调用登录接口
    // requestLogin.run();
    if (values.account === 'admin' && values.password === 'admin') {
      history.replace('/home');
    }
  }, []);

  return (
    <Row className={styles.page}>
      <Col span={12}></Col>
      <Col span={12}>
        <div className={styles.content}>
          <div className={styles.card}>
            <div className={styles.loginTitle}>用户登录</div>
            <Form name="basic" onFinish={onFinish}>
              <Form.Item
                name="account"
                rules={[
                  {
                    required: true,
                    message: '请填写登录账号',
                  },
                ]}
              >
                <Input placeholder="账号/手机号 admin" />
              </Form.Item>

              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: '请填写登录密码',
                  },
                ]}
              >
                <Input.Password placeholder="请输入密码 admin" />
              </Form.Item>

              <Form.Item
                extra={
                  <div style={{ marginTop: 8 }}>忘记密码请联系管理员处理</div>
                }
              >
                <Button type="primary" htmlType="submit" block>
                  登 录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </Col>

      <div className={styles.footer}>CopyRight © 2019-2020</div>
    </Row>
  );
}

Login.title = '登录';
export default Login;
